<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
		<link rel="stylesheet" media="screen" href="../css/style.css" />		
		<title></title>
	</head>
	<body>
		<div id="particles-js">
			<div id="app" style="position: absolute; left;height: 400px; width: 20%; margin-left: 40%; margin-top: 150px; background-color: aquamarine;">
				    <Card style="width:100%; height: 100%;">
				        <div style="text-align:center">
				            <img src="../img/logo.PNG" style="height: 30%; width: 100%;">
				            <div>
				            	<br />
				            	<br />
							    <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
							        <form-item prop="user">
							            <i-input type="text" size="large" v-model="formInline.user" placeholder="Username">
							                <icon type="ios-person-outline" slot="prepend"></icon>
							            </i-input>
							        </form-item>
							        <form-item prop="password">
							            <i-input type="password" size="large" v-model="formInline.password" placeholder="Password">
							                <icon type="ios-lock-outline" slot="prepend"></icon>
							            </i-input>
							        </form-item>
							        <form-item>
							            <i-button type="primary" @click="handleSubmit('formInline')" style="margin-left: 10px;">登录</i-button>
							            <i-button type="dashed" >注册</i-button>
							        </form-item>
							    </i-form>			            	
				            </div>
				        </div>
				    </Card>				
			</div>				
		</div>
	</body>
	<script src="../js/particles.js"></script>
	<script src="../js/app.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }				
			},
	        methods: {
	            handleSubmit(name) {
	                this.$refs[name].validate((valid) => {
	                    if (valid) {
	                        this.$Message.success('Success!');
	                    } else {
	                        this.$Message.error('Fail!');
	                    }
	                })
	            }
	        }			
		})
	</script>	
</html>
